<template>
  <div class="pieChartx-Box">
    <div ref="pieChart" :style="{ width: '300px', height: '300px' }"></div>
  </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import api from '@/api'
//居民数据
let genderList = ref()
let ageshi = ref<number>(0)
let agesanshi = ref<number>(0)
let agesishi = ref<number>(0)
let agewushi = ref<number>(0)
let ageliushi = ref<number>(0)
let datagender = ref<Array<any>>([])
let residentsum = ref<number>(0)
//页面默认信息
const postAllBasicResidentBySearch = async () => {
  const result = await api.Mdatastatistics.postAllBasicResidentBySearchApi()
  // console.log("年龄", result.data.data);
  genderList.value = result.data.data
  genderdemo()


}
postAllBasicResidentBySearch()

//获取性别数据
function genderdemo() {

  genderList.value.forEach((item: any) => {
    // console.log('item', item.birthday);
    const now = new Date();
    const birthday = new Date(item.birthday);
    const age = now.getFullYear() - birthday.getFullYear();
    // console.log('age', age);
    if (age < 10) {
      ageshi.value++
    } else if (age > 9 && age < 30) {
      agesanshi.value++
    } else if (age > 29 && age < 40) {
      agesishi.value++
    } else if (age > 39 && age < 50) {
      agewushi.value++
    } else {
      ageliushi.value++
    }
  });
  aaa();



}

const aaa = () => {
  residentsum.value = ageshi.value + agesanshi.value + agesishi.value + agewushi.value + ageliushi.value;
  datagender.value = [
    { no: 1, value: ageshi.value, name: `10岁以下`, ratio: (ageshi.value / residentsum.value) * 100 + "%" },
    { no: 2, value: agesanshi.value, name: `10-30岁`, ratio: (ageshi.value / residentsum.value) * 100 + "%" },
    { no: 3, value: agesishi.value, name: `30-40岁`, ratio: (agesishi.value / residentsum.value) * 100 + "%" },
    { no: 4, value: agewushi.value, name: `40-50岁`, ratio: (agewushi.value / residentsum.value) * 100 + "%" },
    { no: 5, value: ageliushi.value, name: `50岁以上`, ratio: (ageliushi.value / residentsum.value) * 100 + "%" },
  ]
  initPieEcharts()
  senfmsg()
}
console.log(datagender, '----------------------------');

const emit = defineEmits<{ (e: "make", val: any): void }>()
const senfmsg = () => {
  emit("make", datagender)
}

//绘制饼图
const pieChart = ref<HTMLElement>();
const myChart2 = ref<any>();
function initPieEcharts() {
  myChart2.value = echarts.init(pieChart.value!)
  myChart2.value.setOption({
    title: {
      text: '居民年龄构成',
      x: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '85%',
      left: 'left',
      icon: 'circle'
    },
    series: [
      {
        name: '居民数量',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          normal: {
            show: true,
            position: 'center',
            formatter: `居民总数 ${residentsum.value}`
          },
          emphasis: {
            show: true,
          }

        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: '400'
          }
        },
        labelLine: {
          show: false
        },
        data: datagender.value
      }
    ]
  })
}


</script>

<style lang='scss' scoped>
.pieChartx-Box {
  border: 1px solid #eee;
  width: 300px;
  height: 300px;
  border-radius: 6px;
  margin: 20px 0;
  padding: 20px;
}
</style>